<template>
    <div>
        <div class="nav-menu">
            <div>
                <img src="../assets/logo/hangkeNew.png" alt="" class="logo">
            </div>
            <el-menu :default-active="activeIndex" class="el-menu-demo menu" mode="horizontal" text-color="#3655A5FF"
                active-text-color="#3655A5FF" router @select="select">
                <el-menu-item index="1" route="/">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">企业简介</template>
                    <el-menu-item index="2-1" route="/overview" style="font-weight: 500;">企业简介</el-menu-item>
                    <el-menu-item index="2-2" route="/projectProcess" style="font-weight: 500;">项目历程</el-menu-item>
                    <!-- <el-menu-item index="2-3" style="font-weight: 500;">选项3</el-menu-item> -->
                </el-submenu>
                <el-menu-item index="3" route="/product">产品与服务
                    <!-- <el-menu-item index="3-1" route="/product" style="font-weight: 500;">产品与服务</el-menu-item> -->
                    <!-- <el-menu-item index="3-2" route="/projectCase" style="font-weight: 500;">项目案例</el-menu-item> -->
                    <!-- <el-menu-item index="3-3" style="font-weight: 500;">选项3</el-menu-item> -->
                </el-menu-item>
                <el-menu-item index="4" route="/success-case">应用案例</el-menu-item>
                <el-submenu index="5">
                    <template slot="title">行业资讯</template>
                    <el-menu-item index="5-1" route="/industryInformation" style="font-weight: 500;">行业资讯</el-menu-item>
                    <el-menu-item index="5-2" route="/TechnicalQA" style="font-weight: 500;">技术问答</el-menu-item>
                </el-submenu>
                <el-menu-item index="6" route="/journalism">关于我们</el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
export default {
    props: ['active'],
    data() {
        return {
            activeIndex: "1",
            menu: [
                { id: "1", route: '/' },
                { id: "2", route: '/overview', },
                { id: "2", route: '/projectProcess', },
                { id: "3", route: '/product' },
                { id: "3", route: '/projectCase' },
                { id: "4", route: '/success-case' },
                { id: "5", route: '/industryInformation' },
                { id: "5", route: '/TechnicalQA' },
                { id: "5", route: '/TechnicalQA_detail' },
                { id: "6", route: '/journalism' },
            ]
        };
    },
    created() {
        // this.activeIndex = this.active
    },

    mounted() {
        let path = window.location.hash;
        path = this.deleteNum(path.substring(1, path.length))
        console.log(path,1111111);
        this.activeIndex = this.menu.filter(item => {
            return item.route == path
        })[0].id;
        console.log(this.activeIndex,123);
    },
    components: {},
    watch: {
        active: {
            handler() {
                this.activeIndex = this.active
            }
        }
    },
    methods: {
        select(key) {
            // console.log(key.substring(0,1));
            this.$emit('select', key.substring(0, 1))
        },
        deleteNum(str) {
            let reg = /[0-9]+/g;
            let str1 = str.replace(reg, "");
            // let reg1 = new RegExp("?key="); 
            // let a1 = str1.slice(0, str1.length - 5);
            // console.log(a1);

            return str1;
        }
    },
    computed: {},
}
</script>

<style scoped>
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: sticky;
    top: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    z-index: 100;
    box-shadow: 0px 4px 20px rgba(54, 85, 165, 0.1);
    margin-bottom: 4px;
}

.logo {
    height: 50px;
}

.el-menu.el-menu--horizontal {
    border: none !important;
    font-weight: 500 !important;
}

.el-menu--horizontal>.el-menu-item {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 16px !important;
    margin: 0 20px !important;
    padding: 0 !important;
}

.el-menu--horizontal>.el-submenu /deep/ .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 16px !important;
    margin: 0 20px !important;
    padding: 0 !important;
}

.el-menu--horizontal>.el-submenu /deep/ .el-submenu__title i {
    font-size: 16px;
    color: rgb(54, 85, 165);
}
</style>